<template>
	<view class="order-whole-page">
    <scroll-view class="list-item" srcoll-y @scrolltolower="loadMore">
			<view class="goods">
				<view class="img">
					<image src=""></image>
				</view>
				<view class="content">
					<view class="title two-line">
						<text class="num">10人团</text>
						苹果13PRO超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全
					</view>
					<view class="price">
						<text class="now-price">¥6600.00</text>
						<text class="old-price">¥7700.00</text>
					</view>
					<view class="bottom">
						<view class="imgs">
							<image></image>
							<image></image>
							<image></image>
						</view>
						<view class="text">3人已购买</view>
						<view class="invite">邀请好友</view>
					</view>
				</view>
			</view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
    methods: {
      loadMore () {

      }
    }
  }
</script>

<style lang="less" scoped>
	.order-whole-page {
		.list-item {
			width:100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			.goods {
				width: 100%;
				padding: 40rpx 14rpx;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				.img {
					margin-right: 30rpx;
					image {
						width: 210rpx;
						height: 160rpx;
					}
				}
				.content {
					flex: 1;
					.title {
						font-size: 26rpx;
						color: #333;
						text {
							display: inline-block;
							vertical-align: top;
						}
						.num {
							background-color: #353743;
							color: #fff;
							font-size: 20rpx;
							padding: 4rpx 9rpx;
							margin-right: 9rpx;
							margin-top: 3rpx;
						}
					}
					.price {
						margin: 24rpx 0;
						.now-price {
							color: #FD8201;
							font-size: 34rpx;
							margin-right: 20rpx;
							font-family: SimHei;
						}
						.old-price {
							color: #ccc;
							font-size: 30rpx;
							text-decoration:line-through
						}
					}
					.bottom {
						display: flex;
						align-items: center;
						.imgs {
							image {
								width: 35rpx;
								height: 35rpx;
								border-radius:50%;
								margin-right: 15rpx;
							}
							image + image {
								margin-left: -12rpx;
							}
						}
						.text {
							font-size: 24rpx;
							color: #666;
							flex: 1;
						}
						.invite {
							background-color: #FA5B40;
							border-radius: 5rpx;
							padding: 10rpx 5rpx;
							font-size: 20rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
